<template>
	<div class="shopCart-container">
		<!-- 商品列表区域 -->
		<div class="goodsList">
			<div class="mui-card " v-for="(item,i) in cartGoods" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch ></mt-switch><!-- v-model="value" -->
						<img :src="item.thumb_path" alt="">
						<div class="goodsInfo">
							<h4>{{item.title}}</h4>
							<p>
								<span class="sell_price items">￥{{item.sell_price}}</span>
								<numbox :goodsNum = "countObj[item.id]" class= items></numbox>
								<a  class="items" @click.prevent="remove(item.id,i)">删除</a>

							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 结算区域 -->
		
	</div>
</template>
<script>
	import numbox from '../subComponents/shopCart_numbox.vue'
	export default{
		data:function(){
			return {
				// 购物车的商品列表信息
				cartGoods:[],
				// 购物车商品的id 对应的商品的数量的一个对象，用于初始化购物车的numbox的值
				countObj:{}
			};
		},
		methods:{
			//要把store里面的cart的商品id 一个数组拼接一个请求，由getCartGoods发起
			getCartGoods(){
				var GoodsCount={};
				var ids = [];
				this.$store.state.cart.forEach(item =>{
					ids.push(item.id);
					GoodsCount[item.id] = item.num;
					this.countObj =GoodsCount;
				});
				this.$http.get('api/goods/getshopcarlist/'+ids.join(',')).then(result =>{
					if(result.body.status == 0)
					{
 						this.cartGoods = result.body.message;
					}
				});
			},
			remove(id,i){
				//删除store里面的数据，要给vuex的store添加一个方法
				this.$store.commit('remove',id);
				//重新向localstorage保存
				localStorage.setItem("cart",JSON.stringify(this.$store.state.cart));
				//删除cartGoods数组的数据，渲染购物车页面的数据
					this.cartGoods.splice(i,1);

			}

		},
		created:function(){
			this.getCartGoods();
		},
		components:{
			'numbox':numbox
		}
	}

</script>
<style scoped lang="scss">
	.shopCart-container{
		.goodsList{
			.mui-card-content-inner{
				display: flex;
				justify-content:space-between;
				align-items:center;

				img{
					width: 60px;
					height: 60px;
				}
			.goodsInfo{
				h4{
					font-size: 13px;
				}
				p{
					display: flex;
					.items{
						flex:auto;
					}
					.sell_price{
						color:red;
					}
					.mui-numbox{
						height: 30px;
					}
				}
				
			}
			}
			
		}
	}
</style>